<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标悬停吸附效果</title>
	</head>
	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel="stylesheet" />
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
			background-color: #222;
			overflow: hidden;
		}
		ul {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 50px;
		}
		ul li {
			position: relative;
			width: 100px;
			height: 100px;
			border-radius: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			/* border: 1px solid #fff; */
			font-size: 2em;
			color: #fff;
			transition: 0.1s;
		}
		ul li a {
			display: block;
			width: 100%;
			height: 100%;
		}
		ul li i {
			position: absolute;
			pointer-events: none;
			color: #fff;
		}
		#cursor {
			position: absolute;
			top: 20px;
			left: 20px;
			width: 20px;
			height: 20px;
			border: #fff 10px solid;
			border-radius: 50%;
			filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff);
			pointer-events: none;
			transform: translate(-50%, -50%);
			opacity: 0;
			transition: all 0.3s, left 0s, top 0s;
		}
		body:hover #cursor {
			opacity: 1;
		}
		ul li:hover ~ #cursor {
			width: 100px;
			height: 100px;
			border: #fff 2px solid;
		}
	</style>
	<body>
		<ul>
			<li>
				<a href=""></a>
				<i class="bx bxl-github"></i>
			</li>
			<li>
				<a href=""></a>
				<i class="bx bxs-user-pin"></i>
			</li>
			<li>
				<a href=""></a>
				<i class="bx bxl-tiktok"></i>
			</li>
			
			<div id="cursor"></li>
		</ul>
		<script>
			const cursor = document.getElementById("cursor");
			
			document.addEventListener("mousemove", (e) => {
				cursor.style.left = e.pageX + "px";
				cursor.style.top = e.pageY + "px";
			});
			const items = document.querySelectorAll("ul li");
			items.forEach(item => {
				item.addEventListener("mousemove", (event) => {
					const x = event.offsetX;
					const y = event.offsetY;
					
					const itemWidth = item.clientWidth;
					const itemHeight = item.clientHeight;
					
					const transX = x - itemWidth / 2;
					const transY = y - itemHeight / 2;

					item.style.transform = `translate(${transX}px, ${transY}px)`;
				});
				item.addEventListener("mouseleave", () => {
					item.style.transform = "translate(0, 0)";
				});
			});
		</script>
	</body>
</html>